<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue";
import Header from "./header.vue";
import Main from "./main.vue";
import Footer from "./footer.vue";
import Aside from "./aside.vue";

const activeMenu = ref("1");
const isCollapse = ref(false);
isCollapse.value = document.body.offsetWidth < 1440;
window.onresize = () => {
  isCollapse.value = document.body.offsetWidth < 1440;
  console.log(isCollapse.value);
};

onBeforeUnmount(() => {
  window.onresize = null;
});

const onMenuChange = (index) => {
  activeMenu.value = index;
};
</script>

<template>
  <div class="order-layout">
    <el-container class="order-layout__container">
      <el-header height="64px" class="order-layout__header">
        <Header></Header>
      </el-header>
      <el-container style="height: calc(100% - 64px)">
        <el-aside
          :width="isCollapse ? '70px' : '240px'"
          class="order-layout__aside"
        >
          <Aside
            :is-collapse="isCollapse"
            :active-menu="activeMenu"
            @on-menu-change="onMenuChange"
          ></Aside>
        </el-aside>
        <el-container>
          <el-main class="order-layout__main">
            <Main :active-menu="activeMenu"></Main>
          </el-main>
          <!-- <el-footer height="72px" class="order-layout__footer">
            <Footer></Footer>
          </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.order-layout__container {
  height: 100vh;
  width: 100vw;
}
.order-layout__header {
  box-shadow: 0px -1px 0px 0px #ced4df inset;
}
.order-layout__aside {
  box-shadow: -1px 0px 0px 0px #ced4df inset;
}
.order-layout__main {
  flex-basis: 0;
}
.order-layout__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
